<template>
  <CustomNavbar></CustomNavbar>
  <XtxSwiper :list="SwiperImgData"></XtxSwiper>
  <ForntCategory :list="ForntCategoryAry"></ForntCategory>
  <HotPanel :list="HotPanelData"></HotPanel>
    <scroll-view scroll-y @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh" refresher-enabled class="scroll-view" :refresher-triggered="isTriggered">
      <XtxGuess ref="guessRef"></XtxGuess>
    </scroll-view>
  <!-- <button type="default" @click="goToLogin()">跳转到登录页面</button> -->
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import ForntCategory from "./components/ForntCategory.vue";
import CustomNavbar from "./components/CustomNavbar.vue";
import { onMounted, ref } from "vue";
import { getForntCategory, getHomeBannerAPI, getHotPanel } from "../../APi";
import { BannerItem } from "../../types/home";
import { ForntCategoryItem, GuessLikeItem, HotPanelItem } from "../../APi/types";
import HotPanel from "./components/HotPanel.vue";
import XtxGuess from "../../components/XtxGuess.vue";
let ForntCategoryAry = ref<ForntCategoryItem[]>([]);
let SwiperImgData = ref<BannerItem[]>([]);
let HotPanelData = ref<HotPanelItem[]>([]);
let guessRef = ref();
let isTriggered = ref(false);
console.log(guessRef);

const getIndexForntCategoryData = async () => {
  const res = await getForntCategory();
  ForntCategoryAry.value = res.result;
  //  iconArry.value = ForntCategoryAry.value.map((i) => {
  //     return i.icon
  //   })
  //   nameArry.value= ForntCategoryAry.value.map((i) => {
  //     return i.name
  //   })
};
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI();
  SwiperImgData.value = res.result;
};
const getIndexHotPanelData = async () => {
  const res = await getHotPanel();
  HotPanelData.value = res.result;
};

const goToLogin = () => {
  uni.navigateTo({
    url: "/pages/login/index",
  });
};
const onScrolltolower = async () => {
  await guessRef.value?.getGuessLike();
};
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true;
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData(); // 加载数据
  await guessRef.value?.getGuessLike();
  await Promise.all([getHomeBannerData(), getIndexForntCategoryData(), getIndexHotPanelData()]); // 关闭动画

  isTriggered.value = false;
};

onLoad(() => {
  getHomeBannerData();
  getIndexForntCategoryData();
  getIndexHotPanelData();
});
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  /* 去掉 page 的 height:100%，避免影响固定高度 */
}

/* 关键：scroll-view 设固定高度 + 溢出滚动 */
.scroll-view {
  /* 固定高度：根据真机调试调整，800rpx 适配大部分手机（可根据需求改） */
  height: 1100rpx; 
  /* 超出高度时显示滚动条，必须加 */
  overflow-y: auto; 
  /* 避免滚动区域背景透明，和页面背景保持一致 */
  background-color: #f7f7f7; 
  /* 可选：加底部内边距，避免最后一条数据被遮挡 */
  padding-bottom: 20rpx;
}
</style>
